<template>
  <div class="hospital-info">
    <!-- 科室展示 -->
    <div class="department-bar">
      <el-button
          class="department-button"
          v-for="department in departments"
          :key="department.id"
          @click="handleDepartmentClick(department)"
      >
        {{ department.name }}
      </el-button>
    </div>

    <!-- 医生信息展示 -->
    <div class="doctor-info">
      <el-card
          class="doctor-card"
          v-for="doctor in doctors"
          :key="doctor.name"
      >
        <div slot="header" class="clearfix">
          <div class="header-content">
            <img :src="'http://localhost:8000'+doctor.avatar" alt="doctor-avatar" class="doctor-avatar">
            <span>{{ doctor.name }} - {{ doctor.title }}</span>
          </div>
        </div>
        <div class="doctor-details">
          <p>科室：{{ doctor.department }}</p>
          <p>擅长：{{ doctor.description }}</p>
          <p>医院：{{ doctor.hospital }}</p>
          <p>评分：{{ doctor.score }}</p>
          <p>回答次数：{{ doctor.response_count }}</p>

        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { ElButton, ElCard } from 'element-plus';
import axios from "axios";
const ps = `http://localhost:8000/app/`;

// 科室列表
const departments = ref([]); // 初始化为数组

// 医生信息
const doctors = ref([]); // 初始化为数组

// 点击获取医生各个科室信息
const handleDepartmentClick = (department) => {
  axios.post(ps + `doctor_by_department/`, { id: department.id })
      .then(res => {
        // console.log(res.data);
        doctors.value = res.data;
      });
};

onMounted(() => {
  // 获取科室列表
  axios.get(ps + `department/`)
      .then(res => {
        // console.log(res.data);
        departments.value = res.data;

        // 默认点击第一个科室获取医生信息
        if (departments.value.length > 0) {
          handleDepartmentClick(departments.value[0]);
        }
      });
});
</script>

<style scoped>
.hospital-info{
  margin-top: 20px;
}
.department-bar {
  display: flex;
  flex-direction: row; /* 改为行方向 */

  margin-bottom: 20px;
  text-align: center; /* 居中 */
  background-color: steelblue;
}

.department-button {
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
  margin: 5px 0; /* 调整上下间距 */
  flex-basis: 100%; /* 每个分类项占据整个父容器的宽度 */
  color: #fff; /* 科室按钮文字颜色 */
  background-color: transparent; /* 科室按钮背景色 */
  border: none; /* 科室按钮无边框 */
}

.department-button:hover {
  background-color: #f5f7fa;
}

.doctor-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 每行显示4个医生卡片 */
  gap: 10px; /* 项目间距 */
  margin-top: 20px;
}

.doctor-card {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden; /* 确保内容不超出边框 */
}

.header-content {
  display: flex;
  flex-direction: column; /* 改为列方向 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.doctor-avatar {
  display: block; /* 使其在新行中显示 */
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px; /* 增加下边距 */
}

.doctor-details p {
  margin: 5px 0;
  font-size: 14px; /* 确保文字大小一致 */
}
</style>
